<template>
    <div class="Createcourse">
        <div class="Createcourse-title">添加老师</div>
        <div class="Createcourse-content">
            <form  class="isunion" :model="form" :rules="rules" ref="form">
                <label class="Createcourse-type">
                    <span><i>*</i>老师登录账号</span>
                    <el-input v-model="login_name" placeholder="创建老师登录账号"></el-input>
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>老师登录密码</span>
                    <el-input v-model="login_pass" type="password"  placeholder="创建老师登录密码"></el-input>
                </label>
                <label>
                    <span><i>*</i>老师头像</span>
                    <el-upload
                        class="avatar-uploader"
                        :action="domain"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeUploadGetKey"
                        :data="QiNiYun"
                    >
                        <img v-if="photo" :src="photo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>姓名</span>
                    <el-input v-model="full_name"  placeholder="输入老师姓名"></el-input>
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>性别</span>
                    <el-select v-model="sex" value-key="value" @change="sexchanges" placeholder="选择老师性别">
                        <el-option
                            v-for="item in sexs"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>出生日期</span>
                    <el-date-picker
                        v-model="teacherBirthday"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择老师出生日期">
                    </el-date-picker>
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>地址</span>
                    <el-input v-model="mechanism_addr" disabled placeholder="请输入机构地址"></el-input>
                    <img src="/images/椭圆 31@2x.png" @click="mapshow" alt="" class="adds">
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>手机号</span>
                    <el-input v-model="mobile" prop="phone" placeholder="输入老师手机号"></el-input>
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>教学语言</span>
                    <el-select v-model="teach_language" value-key="value" @change="languagechanges" placeholder="选择老师的教学语言">
                        <el-option
                            v-for="item in languageTranslate"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>入驻身份</span>
                    <el-select v-model="stringLists" value-key="value" @change="stringListschanges" multiple placeholder="选择老师的入驻身份（可多选）">
                        <el-option
                        v-for="item in stringList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </label>
                <label class="Createcourse-type" v-show="privateshow">
                    <span><i>*</i>收费标准</span>
                    <el-input v-model="charging_standard"  placeholder="输入收费标准"></el-input>
                </label>
                <label class="Createcourse-type" v-show="privateshow">
                    <span><i>*</i>课程时长</span>
                    <el-input v-model="course_duration"  placeholder="输入课程时长"></el-input>
                </label>
                <label class="Createcourse-type">
                    <span><i>*</i>个人简介</span>
                    <el-input  type="textarea" show-word-limit maxlength="200" v-model="introduction"></el-input>
                </label>
                <label>
                    <span><i>*</i> 相关证明材料</span>
                    <el-upload
                    :action="domain"
                    list-type="picture-card"
                    :data="QiNiYun"
                    :on-success="handleAvatarfor"
                    :before-upload="beforeUploadGetKey"
                    :auto-upload="true">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                    <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <span class="mustinfo">（营业执照和教学资格证必传）</span>
                </label>
                <label class="note">
                    <span>注：照片仅供平台审核使用，绝不对外展示！</span>
                </label>
                <label class="rasd">
                  <span><i>*</i>是否允许修改资料</span>
                    <el-radio v-model="radio" label="true">是</el-radio>
                    <el-radio v-model="radio" label="false">否</el-radio>
                </label>
                <div class="iconbuttons">
                    <span @click="Toexits">取消</span>
                    <span class="submist" @click="Institutions('form')">提交</span>
                </div>
            </form >
        </div>
        <Map v-show="Isshow" :Isshow.sync ='Isshow' :latitude.sync='latitude' :longitude.sync='longitude' :mechanism_addr.sync="mechanism_addr"></Map>
    </div>
</template>
<script>
import languageTranslate from '../../../public/citys/languages'
import Map from '../../components/map'
export default {
  name: "agencyCertification",
  data() {
    return {
        Isshow:false,
        sexs:[
            {
                value: '1',
                label: '男'
            },
            {
                value: '2',
                label: '女'
            }
        ],
        stringList:[
            {
                value: 'live_lecturer',
                label: '直播讲师' 
            },
            {
                value: 'mother_tongue',
                label: '母语助学师' 
            },
            {
                value: 'cross_border',
                label: '跨境助学师' 
            },
            {
                value: 'major',
                label: '专业助学师' 
            },
            {
                value: 'private_education',
                label: '私教' 
            }
        ],
        languageTranslate:[],
        teacherBirthday:'',
        userinfo:JSON.parse(localStorage.getItem('userinfo')),
        teacherAge:'',
        QiNiYun: {
            key: "",
            token: ""
        },
        QiNiYuns: {
            key: "avatoravatoravatorasss",
            token: ""
        },
        QiNiYunss: {
            key: "avator",
            token: ""
        },
        domain: "http://up-z0.qiniup.com",
        qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
        upload_qiniu_addr: "http://img.curiousmore.com/",
        Isshow:false,
        dialogVisible:false,
        dialogImageUrl:'',
        disabled:false,
        //机构入驻信息
        login_name:'',//登录名
        login_pass:'',//登录密码
        photo:'',//头像
        full_name:'',//姓名
        sex:'',//性别
        master_age:'',//年龄
        mechanism_addr:'',//地址
        mobile:'',//手机号
        teach_language:'',//教学语言
        stringLists:'',//入驻身份
        introduction:'',//简介
        relevant_information:'',//相关材料
        latitude:'',//经纬度
        longitude:'',//经纬度
        mechanism_id:this.$route.query.mechanism_id,//机构购iD
        radio: 'true',//是否允许修改资料
        privateshow:false,//是否为私教
        charging_standard:'',//收费标准，
        course_duration:'',//课程时长

        ruleForm:{
          phone:'',
        },
        rules:{
          phone:[
              {required: true,message:'请输入11位手机号码', trigger: 'blur'},
              {pattern: /^1[34578]\d{9}$/,message:'请输入11位手机号码'}
          ]
        }
    };
  },
  created(){
    this.languageTranslate = languageTranslate.languageTranslate
  },
  components: {//组件注册
    Map
  },
  mounted() {
    this.getQiniuToken();
  },
    methods: {
        sexchanges(e) {//性别选择
            this.sex = e
        },
        languagechanges(e){//教学语言选择
          this.teach_language =e
        },
        stringListschanges(e){//身份选择
            // this.stringLists= e.toString()
          this.stringLists.forEach(e => {
            console.log(e,'0ooo')
              if(e=='private_education'){
                this.privateshow = true
              } 
              if(e != "private_education"){
                this.privateshow = false
              }
          });
            
        },
        Institutions(formName){//机构入驻
            let birthdays = new Date(this.teacherBirthday.replace(/-/g, "/"));
            let d = new Date();
            let age = d.getFullYear() - birthdays.getFullYear() - (d.getMonth() < birthdays.getMonth() || (d.getMonth() == birthdays.getMonth() &&d.getDate() < birthdays.getDate())? 1: 0);
            this.master_age = age;
            console.log(this.radio,'-oo')
            if(this.privateshow){
              var data = {
                full_name:this.full_name,
                login_name:this.login_name,
                login_pass:this.login_pass,
                photo:this.photo,
                sex:this.sex,
                master_age:this.master_age,
                nhom_address:this.mechanism_addr,
                mobile:this.mobile,
                teach_language:this.teach_language,
                stringList:this.stringLists.join(","),
                introduction:this.introduction,
                relevant_information:this.relevant_information,
                latitude:this.latitude,
                longitude:this.longitude,
                mechanism_id:this.mechanism_id,
                is_self_modification:this.radio,
                service_type:'3',
                charging_standard:this.charging_standard,
                course_duration:this.course_duration
              }
            }else{
              var data = {
                full_name:this.full_name,
                login_name:this.login_name,
                login_pass:this.login_pass,
                photo:this.photo,
                sex:this.sex,
                master_age:this.master_age,
                nhom_address:this.mechanism_addr,
                mobile:this.mobile,
                teach_language:this.teach_language,
                stringList:this.stringLists.join(","),
                introduction:this.introduction,
                relevant_information:this.relevant_information,
                latitude:this.latitude,
                longitude:this.longitude,
                mechanism_id:this.mechanism_id,
                is_self_modification:this.radio,
                service_type:'3',
              }
            }
            
            this.$axios({
            method:'post',
            url:'http://101.37.66.151:8768/eg-api/user/masterInfo/masterMechanismInsert',
            data:data,
            }).then((response) =>{
            console.log(response,'我收到的礼物')
                if(response.data.message =="成功"){
                    this.$router.go(-1);
                }else{
                    alert(response.data.message)
                }
            }).catch((error) =>{
            console.log(error)
            })
            return false;
    },
    handleAvatarSuccess(res, file) {
      this.photo = this.upload_qiniu_addr + res.key;
    },
    handleAvatarfor(res,file){//证明材料
        var _this = this
        if(_this.relevant_information.length == 0){
            _this.relevant_information =  _this.upload_qiniu_addr + res.key
        }else{
            _this.relevant_information = _this.relevant_information + ','+ _this.upload_qiniu_addr + res.key
        }
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(res,file) {
      this.dialogImageUrl =this.upload_qiniu_addr + res.key;
      this.dialogVisible = true;
      console.log(this.dialogImageUrl,'0000')
    },
    beforeUploadGetKey() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuToken();
    },
    handleDownload(file) {
      console.log(file);
    },
    getQiniuToken() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
        data: data
      })
        .then(response => {
          this.QiNiYun.token = response.data.data;
          this.QiNiYun.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    Toexits(){//取消
      this.$router.go(-1);
    },
    mapshow(){
        var _this = this
        _this.Isshow = true
    }
  }
};
</script>
<style lang="less" scoped>
.Createcourse {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  min-height: 1600px;
}
.Createcourse-title {
  position: relative;
  width: 90%;
  height: 90px;
  margin: 0 auto;
  display: flex;
  font-size: 20px;
  align-items: center;
  border-bottom: 1px solid #47cecf;
  color: #2dc7c8;
  font-weight: bold;
  letter-spacing: 8px;
  padding-left: 20px;
  background-image: url('/images/形状 3png.png');
  background-repeat: no-repeat;
  background-position-y: 50%;
  background-size: 12px 17px;
}
.Createcourse-content {
  position: relative;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
.Createcourse-content > label {
  display: flex;
  width: 100%;
  margin-top: 40px;
  span {
    width: 14%;
    i {
      color: #ff7336;
    }
  }
}
.Createcourse-type {
  // height: 60px;
  align-items: center;
  /deep/.el-select {
    width: 50%;
    border: #cecece;
    /deep/.el-input{
        width: 100%;
    }
  }
  /deep/.el-select {
    width: 50%;
    border: #cecece;
  }
  /deep/.el-textarea{
    width: 50%;
    border: #cecece;
    height: 107px;
    /deep/.el-textarea__inner{
      height: 107px;
    }
  }
}
.isunion{
  position: relative;
  width: 100%;
  label{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    span {
        width: 14%;
        text-align: left;
        i {
          color: #ff7336;
        }
    }
    /deep/.el-input{
      width: 50%;
    border: #cecece;
    }
  }
}
.iconbuttons{
  position: relative;
  width: 70%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
  // justify-content: center;
  span{
    display: inline-block;
    width:180px;
    height:42px;
    background:rgba(222,222,222,1);
    border-radius:21px;
    text-align: center;
    line-height: 42px;
    font-size: 16px;
    margin-left: 40px;
    cursor: pointer;
  }
}

//公司logo上传
 .isunion /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .isunion /deep/.el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .isunion /deep/.el-upload-list__item{
    width: 100px;
    height: 100px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  //公司logo上传end
  .mustinfo{
    width: auto!important;
    align-items: center;
    color: #47CECF;
    font-size: 14px;
    line-height: 100px;
  }
  .note>span{
    width: auto!important;
    color: #FF7E7E;
    font-size: 14px;
    margin-left: 14%;
  }

  .submist{
    background: #3ACBCC!important;
    color: #ffffff;
  }
  .adds {
    width: 11px;
    height: 13px;
    cursor: pointer;
    position: absolute;
    left:62%;
  }

  /*弹窗样式*/
  .login {
    position: fixed;
    font-size: 24px;
    height: 576px;
    width: 1063px;
    border-radius:10px;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003;
  }
  .over{
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 1002;
    background-color: #111111;
  }
  .popupcontents{
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  .popupcontents>div{
    width: 1063px;
    height: 576px;
    overflow: hidden;
    border-radius: 20px;
  }
  //弹窗结束
  .submist{
    background: #3ACBCC!important;
    color: #ffffff;
  }
  .rasd{
    display: flex;
    align-items: center;
  }
  .rasd>span{
    width: 16%!important;
  }
  .rasd>label{
    display: flex;
    width: 20%!important;
    margin: 0!important;
    justify-content: center;
  }
</style>